<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<!-- 原生js写购物车 -->
<style>
table{
border-collapse: collapse;
}

thead>tr{
border-bottom:2px solid #B7D1FB ;
}

tbody>tr{
border-bottom:1px solid #B7D1FB; 
}

th,
td{
padding: 12px;
}

a{
text-decoration: none;
}
</style>

</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox"  id="allab" onclick="SelectAll()"/>
<label for="allcb">全选</label>
</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tr>
<td>
<input onclick="choose()" type="checkbox" name="c"/>
</td>

<th>javaScript实战</th>
<td>47.8</td>

<td>
<button onclick="minus()">-</button>
<span>1</span>
<button onclick="plus()">+</button>
</td>

<td style="color: red;">47.8</td>
<td>
<a href="#" onclick="delGood()">删除</a>
</td>
</tr>
<tr>
	<td id="order" colspan="6" style="text-align: right;">
		<span>已经选择16件商品总计</span>
		<span style="color: red; font-size: 22px;">731.40</span>
	<a href="#" style="border-radius: 4px;
	padding:8px;
	background:#F08B34;color:#fff">提交订单</a>
	</td>
</tr>
<!-- 会自动生成tdbody -->
</table>

<script>
var data=[{
name:'javaScript实战',
price:47.8,
num:1
},
{
name:'javaScript实战2代',
price:47.8,
num:2
},
{
name:'javaScript实战3代',
price:47.8,
num:3
},
];
function appendGood(){
	var tr=document.createElement('tr');
	console.log(tr);
}appendGood();

</script>
</body>
</html>
